<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberstore">媒体管理</router-link>
      <router-link tag="li" to="/ymMemberstorecomboaddsubmit">套餐管理</router-link>
      <router-link tag="li" to="/ymMembermyactivity">我的活动</router-link>
      <router-link tag="li" to="/ymMembermycase">我的案例</router-link>
      <router-link tag="p" to="/ymMemberstorecombo" class="uploading"><img src="../assets/ym-member/media/return.png" />返回</router-link>
    </ul>
    <div class="content">
      <h4>基本信息</h4>
      <div class="message">
        <div class="message-left">
        	<p>组合媒体</p>
        	<p style="height: 310px;" v-if="mediaList != null"></p>
          <p>套餐标题</p>
          <p>价格单位</p>
          <p>套餐时间</p>
          <p>覆盖人数</p>
          <p>覆盖车辆</p>
          <p>适用行业</p>
          <p>媒体简介</p>
          <p style="margin-top: 80px;">媒体封面</p>
        </div>
        <div class="message-right">
          <div class="cont">
            <router-link tag="div" to="/ymMemberstorecomboaddmedia" class="btn2">选择媒体</router-link>
            <div class="model" v-if="mediaList != null">
              <dl v-for="media in mediaList" :key="media">
                <dt><img width="180px" height="117px" :src="media.cover" /></dt>
                <div>
                  <h3>{{media.mediaName}}</h3>
                  <!--<dd>{{v.where}}<span>{{v.here}}</span></dd>-->
                  <dd>{{media.address}}<span></span></dd>
                  <dd>刊例价：<span>{{media.prices}}{{media.lightStyleId}}</span></dd>
                </div>
                <!--<div class="shade" @mouseenter='shos=v.num' @mouseleave='shos=0' v-show='shos==v.num'></div>-->
              </dl>
            </div>
          </div>
          <div class="one">
            <input type="text" v-model="mediaPackagepo.title" placeholder="请输入套餐标题"><span>*</span>
          </div>
          <div class="default">
            <input v-model="mediaPackagepo.primeCost" type="text" placeholder="" /><span>*</span>
            <p>原价</p>
            <input v-model="mediaPackagepo.currentPrice" type="text" placeholder="" /><span>*</span>
            <p>现价</p>
            <input type="text" placeholder="" /><span>*</span>
          </div>
          <div class="default">
          	<el-date-picker v-model="mediaPackagepo.startTime" type="datetime" placeholder="开始时间"></el-date-picker>
          	<span style="width: 15px;"></span>
						<el-date-picker v-model="mediaPackagepo.endTime" type="datetime" placeholder="结束时间"></el-date-picker>
          </div>
          <div class="input">
            <input v-model="mediaPackagepo.coverPeople" type="text" placeholder="" />
          </div>
          <div class="input">
            <input v-model="mediaPackagepo.coverCar" type="text" placeholder="" />
          </div>
          <div class="one">
            <select name="" class="sel">
              <option value="" selected="selected">请选择适用行业</option>
            </select>
          </div>
          <div>
            <textarea v-model="mediaPackagepo.description" class="intro"></textarea>
          </div>
          <div class="select">
            <div class="pic1">选择图片</div>
            <div class="pic2">
            	<input id="image" class="up_pic" type="file" value="选择图片" @change="uploadPic"/>
            	<span class="color">*</span><span>注：仅支持JPG,PNG,JPEG格式，文件小于5M</span>
            </div>
            
          </div>
          <div class="image-logo">
            <img id="imgShow" width="252px" height="165px" src="../assets/ym-member/count/imges.png" />
          </div>
          <div class="submit" @click="submit">提交</div>
          <!--<router-link tag="div" to="/ymMemberstorecomboaddsubmit" class="submit">提交</router-link>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-store",
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        shos: 0,
        mediaPackagepo:{},
        mediaList:[],
        user:{},
        model: [{
          name: '媒体标题媒体标题媒体标题',
          where: '机场媒体',
          here: '灯箱',
          this: '北京',
          is: '海淀区',
          days: '1345元/天',
          num: '1'
        }, {
          name: '媒体标题媒体标题媒体标题',
          where: '机场媒体',
          here: '灯箱',
          this: '北京',
          is: '海淀区',
          days: '1345元/天',
          num: '2'
        }]
      }
    },
    mounted(){
    	this.getUserInfo();
    	this.getSelectedMedia();
    },
	  methods:{
	  	getUserInfo:function(){
	  		this.user = JSON.parse(localStorage.getItem("user"));
	  		console.log(this.user)
	  	},
	  	getSelectedMedia:function(){
	  		var ids = sessionStorage.getItem("comboMediaIds")
	  		console.log(ids)
	  		this.$http.post(this.requestAddr+"/GetJson/getSelectedMedia",{"ids":ids},{emulateJSON:true}).then(
	  			(res)=>{
	  				this.mediaList = res.data.mediaList;
	  				console.log(this.mediaList)
	  			}
	  		)
	  	},
	  	uploadPic:function(){
	  		var file = document.getElementById("image").files[0];
				var formdata = new FormData();
				formdata.append("file",file);
				var reader = new FileReader();
				reader.readAsDataURL(file);
				/*reader.onload=function(){
					document.getElementById("imgShow").src=reader.result;
				}*/
				this.$http.post(this.requestAddr+"/GetJson/uploadImage",formdata,{emulateJSON:true}).then(
					(res)=>{
						if(res.data.code==0){
							console.log(res.data.filepath);
							this.mediaPackagepo.imageUrl = res.data.filepath;
							document.getElementById("imgShow").src=reader.result;							
						}
					}
				)
	  	},
	  	submit:function(){
	  		this.mediaPackagepo.memberId = this.user.autoId;
	  		this.mediaPackagepo.hitcount = 0;
	  		this.mediaPackagepo.startTime = this.GMTToStr(this.mediaPackagepo.startTime)
	  		this.mediaPackagepo.endTime = this.GMTToStr(this.mediaPackagepo.endTime)
	  		var ids = sessionStorage.getItem("comboMediaIds")
	  		this.mediaPackagepo.mediaList = JSON.stringify(this.mediaList)
	  		console.log(this.mediaPackagepo)
	  		this.$http.post(this.requestAddr+"/GetJson/addMediaCombo",this.mediaPackagepo,{emulateJSON:true}).then(
	  			(res)=>{
	  				if(res.data.code==0){
	  					alert("添加成功！");
	  					sessionStorage.removeItem("comboMediaIds")
	  					window.location.href = "../#/ymMemberstorecomboaddsubmit"
	  				}
	  			}
	  		)
	  	},
	  	GMTToStr:function(time){//格林威治时间转换为自定义字符串形式
			    let date = new Date(time)
			    let Str=date.getFullYear() + '-' +
			    (date.getMonth() + 1) + '-' + 
			    date.getDate() + ' ' + 
			    date.getHours() + ':' + 
			    date.getMinutes() + ':' + 
			    date.getSeconds()
			    return Str
			},	
			StrToGMT:function(time){//字符串格式时间转换成格林威治时间
			    let GMT = new Date(time)
			    return GMT
			}
	  }
  }

</script>

<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(2) {
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        width: 103px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        color: #999999;
        text-align: center;
        margin-left: 560px;
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          margin-right: 10px;
        }
      }
    }
    .content {
      width: 1200px;
      background-color: white;
      padding-bottom: 44px;
      margin: 0 auto;
      h4 {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-left: 40px;
        padding-top: 40px;
      }
      .message {
        display: flex;
        .message-left {
          p {
            width: 145px;
            text-align: right;
            line-height: 60px;
            font-size: 12px;
            color: #333333;
            &:nth-child(1) {
              margin-top: 0px;
            }
            &:nth-child(9) {
              margin-top: 0px;
            }
            &:nth-child(10) {
              margin-top: 80px;
            }
            &:nth-child(3) {
              margin-top: 0px;
            }
          }
          .eleven {
            margin-top: 0 !important;
          }
        }
        .message-right {
          margin-left: 25px;
          .cont {
            margin-bottom: 15px;
            .btn2{
              width: 99px;
              height: 30px;
              background-color: #dddddd;
              color: #999999;
              text-align: center;
              line-height: 30px;
              border-radius: 3px;
              cursor: pointer;
              &:hover{
                background-color: #f29600;
                color: white;
              }
            }
            .model {
              width: 875px;
              height: 285px;
              overflow-y: auto;
              margin: 0 auto;
              position: relative;
              border: 1px solid #dddddd;
              margin-top: 20px;
              dl {
                width: 412px;
                height: 117px;
                border: 1px solid #dddddd;
                position: relative;
                float: left;
                margin-right: 12px;
                margin-top: 25px;
                margin-left: 5px;
                &:nth-child(even) {
                  margin-right: 0;
                }
                &:nth-child(1) {
                  margin-top: 10px;
                }
                &:nth-child(2) {
                  margin-top: 10px;
                }
                &:last-child {
                  margin-bottom: 10px;
                }
                dt {
                  float: left;

                }
                div {
                  float: right;
                  margin-right: 30px;
                  margin-top: 0;
                  h3 {
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #333333;
                  }
                  dd {
                    line-height: 27px;
                    font-size: 14px;
                    color: #999999;
                  }
                }
                .shade {
                  width: 412px;
                  height: 117px;
                  background: rgba(39, 39, 39, 0.6);
                  position: absolute;
                  top: 0;
                  border: 1px solid #f4c579;
                }
              }
            }
            .btn {
              width: 103px;
              height: 30px;
              background-color: #f29600;
              color: white;
              text-align: center;
              line-height: 30px;
              border-radius: 7px;
              margin-left: 190px;
            }
          }
          .select{
            display: flex;
            align-items: center;
            margin-top: 10px;
            div{
            	margin-top: 40px;
            }
            .pic1{
	        		width: 100px;
	        		height: 30px;
	        		position: absolute;
	        		z-index: 0;
	        		background-color: #dddddd;
	        		color: #999999;
	        		text-align: center;
	        		line-height: 30px;
	        		border-radius: 3px;
	        		cursor: pointer;
	        	}
	        	.pic2{
	        		width: 400px;
	        		position: absolute;
	        		z-index: 1000;
	        		input{
	        			opacity: 0;
	        			width:100px;
	        			height: 30px;
	        			margin: 0;
	        		}
	        	}
            p{
              margin-top: 25px;
              .color{
                color: red;
                padding-right: 15px;
              }
            }
          }
          .one {
            .sel {
              width: 634px;
              margin-right: 0;
              color: #999999;
              padding-left: 10px;
            }
          }
          .name {
            margin-top: 30px;
            line-height: 37px;
          }
          div {
            margin-top: 25px;
            .intro {
              width: 628px;
              height: 95px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            input {
              width: 622px;
              height: 31px;
              padding-left: 10px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            span {
              margin-left: 10px;
              color: #f29600;
              font-size: 12px;
            }
            select {
              width: 198px;
              height: 37px;
              margin-right: 15px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
              color: #999999;
              padding-left: 10px;
              background-image: url(../assets/ym-member/shop/triangle.png);
              background-repeat: no-repeat;
              background-position: 97% center;
              appearance:none;
              -moz-appearance:none;
              -webkit-appearance:none;
              &:nth-child(3) {
                margin-right: 1px;
              }
            }
          }
          
          .default {
            clear: both;
            display: flex;
            .symbol{
              width: 118px;
              text-align: center;
              margin-right: 0;
            }
            .el-date-editor{
            	margin:0px
            }
            input {
              width: 130px;
              height: 31px;
              padding-left: 10px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            span {
              margin-left: 10px;
              color: #f29600;
              line-height: 31px;
              font-size: 12px;
            }
            p {
              width: 82px;
              text-align: right;
              font-size: 12px;
              color: #333333;
              line-height: 31px;
              margin-right: 22px;
              span {
                margin-right: 20px;
                margin-left: 10px;
                color: #f29600;
                line-height: 31px;
                font-size: 12px;
              }
            }
          }
          .yes-or-no {
            height: 35px;
            font-size: 12px;
            color: #333333;
            line-height: 35px;
            input {
              width: 14px;
            }
            .no {
              margin-left: 30px;
            }
            span {
              color: #333333;
              margin-left: 0;
              position: relative;
              bottom: 10px;
            }
            .color {
              color: #f29600;
              line-height: 35px;
              margin-left: 100px;
            }
            .colors {
              color: #f29600;
            }
          }
          .image-logo {
            img {
              margin-left: 20px;
              clear:both;
              border: 1px gainsboro solid;
              margin-top:50px;  
              &:nth-child(1) {
                margin-left: 0;
              }
            }
          }
          .submit {
            width: 103px;
            height: 30px;
            color: white;
            background-color: #f29600;
            text-align: center;
            line-height: 30px;
            border-radius: 7px;
            margin-top: 44px;
            cursor: pointer;
          }
        }
      }
    }
  }

</style>
